<style lang="less" scoped>
    @import '../../styles/common.less';
    /*@import './components/table.less';*/
    .main-table {
        margin-top: 10px;
    }
    .pagination {
        margin-top: 10px;
        padding: 0 10px;
    }
</style>

<template>
    <div>
        <Row>
            <span @click="showAdd"><Button type="primary" icon="android-add">新增</Button></span>
        </Row>
        <div class="main-table">
            <Table border :columns="columns" :data="data"></Table>
        </div>
        <div class="pagination">
            <Page :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="loadList" show-total show-elevator></Page>
        </div>
        <Modal v-model="saveModalVisible" :title="(formData.id ? '修改' : '新增') + '用户'">
            <Form :model="formData" :label-width="100">
                <FormItem label="最小金额范围">
                    <Input v-model="formData.count" style="width: 300px"></Input>
                </FormItem>
                <FormItem label="最大金额范围">
                    <Input v-model="formData.amount" style="width: 300px"></Input>
                </FormItem>
                <FormItem label="税率">
                    <Input v-model="formData.taxation" style="width: 300px"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="primary" @click="userSave">保存</Button>
                <Button type="ghost" style="margin-left: 8px" @click="saveModalVisible = false">取消</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
	import util from '@/libs/util';

	const formStructure = {
        amount: '',
        count: '',
        taxation: '',
		id: ''
	};

	export default {
		name: 'exportable-table',
		data () {
			return {
				columns: [{
                    title: '序号',
                    key: 'rownum',
                    align: 'center',
                    width: 60,
                    render: (h, params) => {
                    return h('div', {}, ((this.pageIndex - 1) * this.pageSize + params.index + 1));
                     }
                },{
					title: '金额范围',
					key: 'amount',
                    render: function (h, params) {
                    return h('div', params.row.count + '~' + params.row.amount );
                }
				}, {
					title: '税率',
					key: 'taxation'
				}, {
					title: '操作',
					key: 'action',
					width: 200,
					align: 'center',
					render: (h, params) => {
						return h('div', [
							h('Button', {
								props: {
									type: 'primary',
									size: 'small'
								},
								style: {
									marginRight: '5px'
								},
								on: {
									click: () => {
										this.showEdit(params.row);
									}
								}
							}, '修改')
						]);
					}
				}],
				data: [],
				formData: {},
				modalVisible: false,
				saveModalVisible: false,

                total: 0,
				pageIndex: 1,
				pageSize: 10
			};
		},
		mounted() {
			this.loadList();
		},
		methods: {
			loadList() {
				util.ajax.post('/busine/ratepay/list', util.toFormData({
					page: this.pageIndex,
					size: this.pageSize
				})).then(res => {
					this.data = res.data.data.list;
					this.total = res.data.data.total;
				});
			},
			detail(id) {
				util.ajax.post('/busine/ratepay/detail', util.toFormData({
					id: id
				})).then(res => {
					if (res.data.data) {
						this.formData = res.data.data;
						this.modalVisible = true;
					} else {
						this.$Modal.error({
							title: '警告',
							content: '出错了'
						});
					}
				});
			},
			showAdd() {
				this.formData = {};
				this.saveModalVisible = true;
			},
			showEdit(obj) {
				this.formData = {};
				for (let key in formStructure) {
					this.formData[key] = obj[key];
				}
				this.saveModalVisible = true;
			},
			userSave(){
				let formData = {};
				for (let key in this.formData) {
					formData[key] = this.formData[key];
				}
				util.ajax.post('/busine/ratepay/save', util.toFormData(formData)).then(res => {
					if (res.data.message === 'SUCCESS') {
						this.saveModalVisible = false;
						this.$Message.success('保存成功！');
						this.pageIndex = 1;
						this.loadList();
					} else {
						this.$Message.warning(res.data.message || '未知错误！');
					}
				});
			}

		}
	};
</script>
